<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>	
		<style>
		@font-face {
		  font-family: 'iconfont';  /* project id 416894 */
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot');
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot?#iefix') format('embedded-opentype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.woff') format('woff'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.ttf') format('truetype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.svg#iconfont') format('svg');
		}
		
		body{
			margin: 0;
			padding: 0;
			background-color: #fff;
		}
		a{
			color: inherit;
			text-decoration: none;
		}
		a:hover{
			color: #3879d9;
			text-decoration: none;
		}

		.top{
			width: 100%;
			height: 50px;
			background-color: blue;
			}
		.hold{
			margin-top: 60px;
			margin-left: auto;
			margin-right: auto;
			width: 60%;
		}
		.weibo_message{
			margin-top: 8px;
			background-color: white;
			min-height: 100px;
			box-shadow: 2px 3px 5px #888888;
		}
		.weibo_message{
			margin-top: 8px;
			background-color: white;
			min-height: 100px;
			box-shadow: 2px 3px 5px #888888;
		}
		.head_img{
			width: 50px;
			height: 50px;
		}
		.weibo_message_img{
			width: 40px;
			height: 40px;
			background-color: black;
			
		}
		.head_nickname{
			flex: 1;
			height: 50px;
		}
		.div_message_mid{
			padding: 8px;
			padding-top: 5px;
		}
		.div_message_bottom{
			display: flex;
		    font-size: 15px;
   			font-weight: 600;
		}
		.btn_bottom{
			text-align: center;
			font-family: "iconfont" !important;
			flex: 1;
			cursor: pointer;
			padding: 8px;
		}
		.btn_bottom:hover{
			background: #cceeff;
		}
		.like_btn_liked{
			color: #00aaff;
		}

		.weibo_top{
			padding: 8px;
			padding-bottom: 5px;
			display: flex;
		}
		.head_nickname_size{
			font-size: 18px;
			font-weight: bold;
		}
		.textarea_message{
			text-indent: 30px;
		    padding-left: 8px;
		    font-size: 15px;
		    font-weight: bold;
		}
		.form-control{
			resize: none;
		}
		.edit_bottom_word_count{
			margin-right: 8px;
		}
		.send_btn{
			padding: 4px 8px 4px 8px;
			color: #fff;
			background: #00aaff;
			border: none;
			border-radius: 4px;
			margin-right: 10px;
		}
		.edit_bottom_right{
			text-align: right;
		}
		#reply_list{
			margin-top: 10px;
		}
		.reply{
			
			padding: 10px;
			border-top: 1px solid rgb(217,217,217);
			background-color:rgb(242,242,245);
		}
		
		.reply_nickname{
			/*padding: 6px;*/
			font-size: 16px;
			font-weight: bold;
		}
		
		.reply_comment{
			text-indent: 30px;
			/*width: 90%;*/
			/*margin-left: auto;*/
			/*margin-right: auto;*/
			font-weight: 700;
			margin: 8px auto 8px auto;
		}
		.replay_time{
			font-size: 14px;
			font-weight: 100px;
			color: rgb(180,187,205);
			/*padding: 8px;*/
			padding-left: 12px;
		}
		.transmit{
			padding: 3px;
			background-color:#f3f3f3;
			margin-left: 40px;
			margin-right: 40px;
			margin-bottom: 5px;
		}
		
		.transmit_name{
			padding: 3px;
			font-size: 16px;
			font-weight: bold;
		}
		.transmit_name_content{
			padding: 3px;
			font-size: 15px;
			font-weight: bold;
		}

		.reply_link{
			font-family: "iconfont" !important;
			cursor: pointer;
		}

		.reply_link:hover{
			color: #3879d9;
		}

		.delete_link{
			font-family: "iconfont" !important;
			cursor: pointer;
		}

		.delete_link:hover{
			color: #3879d9;
		}

		.bottom_row{
			text-align: center;
			padding-top: 16px;
			padding-bottom: 16px;
		}

		.load_more_btn{
			display:inline-block; 
			*display:inline; 
			*zoom:1;
			padding: 8px 24px 8px 24px;
			margin-left: auto;
			margin-right: auto;

			border: 1px solid #aaa;
			border-radius: 4px;
			color: #aaa;

			cursor: pointer;
		}
		.weibo_message_image{
			width: 100%;
			margin-top: 4px;
			margin-bottom: 4px;
			background: #aaa;
		}
		.transmit_image{
			width: 100%;
			margin-top: 4px;
			margin-bottom: 4px;
			background: #aaa;
		}
		</style>
	</head>
	<body>
		<!-- <div class="top"></div> -->
		<div id="nav_area"></div>
		<div class="hold">
			<div class="weibo_message">
			    <div class="weibo_top">
			        <div class="head_img">
			            <a class="nickname_link" href="person.html?u='+thisData.reblog_user_id+'" target="_blank">
			            	<img class="weibo_message_img" src = "'+head_img+'"/>
			            </a>
			        </div>
			        <div class="head_nickname">
			        	<a class="nickname_link" href="person.html?u='+thisData.reblog_user_id+'" target="_blank">
				            <div class="head_nickname_size">'+thisData.nickname+'</div>
				        </a>
			            <div class="time_size">'+formatDateTime(thisData.time)+</div>
			        </div>
			    </div>
			    <img src="img/uploads/'+thisData.image+'" class="weibo_message_image">
			    <div class="div_message_mid">
			        <div class="textarea_message" >'+thisData.content+'
			        </div>
			    </div>

			    <div class="transmit">
			    	<div class="transmit_name">
			    		<a class="reblog_nickname_link" href="person.html?u='+thisData.reblog_user_id+'" target="_blank">@<span class="reblog_nickname">'+thisData.reblog_nickname+'</span></a>
			    	</div>
			    	<img src="img/uploads/'+thisData.reblog_image+'" class="transmit_image">
			    	<div class="transmit_name_content">'+thisData.reblog_content+'</div>
			    </div>

			    <div class="div_message_bottom">
			        <div class="btn_bottom" data-toggle="modal" data-target="#reblogModal">&#xe617; 转&nbsp;发
			        </div>
			    <div class="btn_bottom btn_reply">&#xe62f; 评  论</div>
			    <div class="btn_bottom like_btn">&#xe604; <span id="like_num_span">'+thisData.like_num+'</span></div>
			    </div>
			</div>
			
			<div style="padding: 5px;padding-top: 15px;">
				<textarea class="form-control" rows="3" id="comment_textarea" placeholder="评论..."></textarea>
			</div>
			
			<div class="edit_bottom_right">
						
				<span class="edit_bottom_word_count">
					<span id="word_counter">0</span> / 140
				</span>
				<button class="send_btn">评论</button>

			</div>
			
			<div id="reply_list">
			</div>
			<div class="bottom_row">
				<div class="load_more_btn">
					点击加载更多
				</div>
			</div>	
			<!-- <div class="reply">
				<div class="reply_nickname">@
					<span id="reply_nickname">醉、潇洒</span>
				</div>
				<div class="reply_comment">
					<span id="reply_comment">
						 发送水电费是否离开时间按时交付了大家发生的水电费广东水电费舒服是
						 Z舒服设置放松放松多发第三方是水电费舒服收到
					</span>
				</div>
				<div class="replay_time">
					<span id="reply_time">
						今天 21:51
					</span>
				</div>
			</div>
 -->			
		</div>

		<!-- 转发模态框 -->
	<div class="modal fade" id="reblogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">转发微博</h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <!-- <label for="message-text" class="control-label">微博内容</label> -->
            <textarea class="form-control" id="reblog_textarea" placeholder="转发理由..."></textarea>
            
          </div>
          	<div style="text-align: right;">
				<span id="reblog_word_counter">0</span> / 140
			</div>
          <div class="transmit"><div class="transmit_name">@<span id="modal_nickname">转发自某某某</span></div><div class="transmit_name" id="modal_content">原微博内容</div></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="reblog_submit_btn">发送</button>
      </div>
    </div>
  </div>
</div>

<!-- 删除模态框 -->
	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">删除评论</h4>
      </div>
      <div class="modal-body">
          确认删除这条评论?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-danger" id="delete_comfirm_btn">删除</button>
      </div>
    </div>
  </div>
</div>

<script src="nav.js"></script>
<script>
function getQueryString(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r!=null)return  unescape(r[2]); return null;
}

var blog_id = -1;

$(document).ready(function(){

	showNavBar();

	var bid = getQueryString("b");
	if (bid != null) {
		blog_id = bid
		loadDetail(bid);
	}
	
})

var commentPage = 0;

function loadDetail(bid){
	$.get('weiboDetail.do?blog_id='+bid, function(data){
		try{
			var jsonObj = JSON.parse(data);
			console.log(jsonObj);
			var thisData = jsonObj.data;
			var head_img = 'img/head/' + thisData.head_image + ".jpg";
			$(".weibo_message_img").attr("src", head_img);
			$(".head_nickname_size").html(thisData.nickname);
			$(".nickname_link").attr("href", "person.html?u="+thisData.user_id);
			$(".time_size").html(formatDateTime(thisData.time));
			$(".textarea_message").html(thisData.content);
			if (thisData.image != "") {
				$(".weibo_message_image").attr("src", "img/uploads/"+thisData.image);
			}else{	
				$(".weibo_message_image").hide();
			}
			if(thisData.reblog_user_id != ""){
				$(".reblog_nickname").html(thisData.reblog_nickname);
				$(".reblog_nickname_link").attr("href", "detail.html?b="+thisData.reblog_id);
				$(".transmit_name_content").html(thisData.reblog_content);
				if (thisData.reblog_image != "") {
					$(".transmit_image").attr("src", "img/uploads/"+thisData.reblog_image);
				}else{	
					$(".transmit_image").hide();
				}
			}else{
				$(".transmit").hide();
			}

			$("#like_num_span").html(thisData.like_num);
			if (thisData.liked == "1") {
				$(".like_btn").addClass("like_btn_liked");
			}

			if (thisData.comment_list.length > 0) {
				addCommentList(thisData.comment_list)
			}else{
				$(".load_more_btn").text("没有更多了");
			}
			

		}catch(ex){

		}
	})
}

// 以上列表元素会在载入后绑定点击事件
$(".like_btn").click(function(){
	var _this = $(this);
	// var bid = $(this).attr('data-bid');
	// console.log(bid);
	if (blog_id == -1) {
		return;
	}
	if (!$(this).hasClass('like_btn_liked')) {
		// 未赞，现在点赞
		$.post('likeBlog.do',{
			blog_id: blog_id
		}, function(data){
			console.log(data);
			try{
				var jsonObj = JSON.parse(data);
				if (jsonObj.error == 0) {
					_this.addClass('like_btn_liked');
					var num_span = $("#like_num_span"); //_this.find('.like_btn_num');
					var num = num_span.html();
					console.log(num);

					num_span.html(parseInt(num) + 1 + "");
				}
			}catch(ex){

			}
		})
	}else{
		// 已赞，现在取消点赞
		$.post('unlikeBlog.do',{
			blog_id: blog_id
		}, function(data){
			console.log(data);
			try{
				var jsonObj = JSON.parse(data);
				if (jsonObj.error == 0) {
					_this.removeClass('like_btn_liked');
					// var num_span = _this.find('.like_btn_num');
					var num_span = $("#like_num_span");
					var num = num_span.html();
					console.log(num);

					num_span.html(parseInt(num) - 1 + "");
				}
			}catch(ex){

			}
		})

	}
})

function loadComment(){
	if (blog_id == -1) {
		return;
	}

	$.get('listComment.do?blog_id='+blog_id+'&m='+commentPage*10+'&n='+(commentPage+1)*10, function(data){
		try{
			var jsonObj = JSON.parse(data);
			if (jsonObj.data.length > 0) {
				addCommentList(jsonObj.data);
			}else{
				$(".load_more_btn").text("没有更多了");
			}
		}catch(ex){
			console.log(ex);
		}
	})
}

function addCommentList(list){
	for (var i = 0; i < list.length; i++) {
		var thisComment = list[i];
		var commentHtml = '<div class="reply">'+
							'<div class="reply_nickname">@'+
								'<span id="reply_nickname"><a href="person.html?u='+thisComment.user_id+'" target="_blank">'+thisComment.nickname+'</a></span>'+
							'</div>'+
							'<div class="reply_comment">'+
								'<span id="reply_comment">'+
								thisComment.content+
								'</span>'+
							'</div>'+
							'<div class="replay_time">'+
								'<span id="reply_time">'+
								formatDateTime(thisComment.time)+
								'</span>'+
								'<span class="reply_link" re-nickname="'+thisComment.nickname+'"> &#xe64b; 回复</span>'+
								(thisComment.can_delete == '1' ? '<span class="delete_link" data-cid="'+thisComment.comment_id+'" data-toggle="modal" data-target="#deleteModal"> &#xe634; 删除</span>' : '')+
							'</div>'+
						'</div>';
		$("#reply_list").append(commentHtml);
	}
	commentPage += 1;

	$(".reply_link").click(function(){
		inputedComment = "@" + $(this).attr("re-nickname") + " ";
		$("#comment_textarea").val(inputedComment);
		$("#word_counter").text(getBLen($("#comment_textarea").val()));
		$("#comment_textarea").focus();
		// var speed = 200;
	    $('body,html').animate({ scrollTop: 0 }, 200);
	    // return false;
	})

	// $(".delete_link").click(function(){

	// })

	if (list.length < 10) {
		$(".load_more_btn").text("没有更多了");
	}else{
		$(".load_more_btn").text("点击加载更多");
	}
}

function formatDateTime(inputTime) {    
	var timeInt = parseInt(inputTime);
    var date = new Date(timeInt);  
    var y = date.getFullYear();    
    var m = date.getMonth() + 1;    
    m = m < 10 ? ('0' + m) : m;    
    var d = date.getDate();    
    d = d < 10 ? ('0' + d) : d;    
    var h = date.getHours();  
    h = h < 10 ? ('0' + h) : h;  
    var minute = date.getMinutes();  
    var second = date.getSeconds();  
    minute = minute < 10 ? ('0' + minute) : minute;    
    second = second < 10 ? ('0' + second) : second;   
    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;    
}

$(".btn_reply").click(function(){
	$("#comment_textarea").focus();
})

function getBLen(str) {  
    if (str == null) return 0;  
    if (typeof str != "string"){  
        str += "";  
    }  
    return str.replace(/[^\x00-\xff]/g,"01").length;  
} 

var inputedComment = "";

$("#comment_textarea").bind('input propertychange', function(){
	$("#submitBtn").removeAttr("disabled");

	// 计算个性签名字数
	var comment = $("#comment_textarea").val();
	var wordCount = getBLen(comment);
	if (wordCount > 140) {
		$("#comment_textarea").val(inputedComment);
	}else{
		inputedComment = comment;
	}
	$("#word_counter").text(getBLen($("#comment_textarea").val()));
})

$(".send_btn").click(function(){
	if (inputedComment.length == 0) {
		$("#comment_textarea").focus();
		return;
	}

	postComment(inputedComment);
})

function postComment(content){
	if (blog_id == -1) {
		return;
	}

	$.post('commentBlog.do', {
		blog_id: blog_id,
		comment: content
	}, function(data){
		try{
			var jsonObj = JSON.parse(data);
			if (jsonObj.error == 0) {

				inputedComment = "";
				$("#comment_textarea").val('');

				commentPage = 0;
				// 重新加载评论列表
				$("#reply_list").html('');
				loadComment();


			}else if (jsonObj.error == 220) {
				window.location.href = "login.html";
			}else{
				alert('系统异常，请稍后重试');
			}
		}catch(ex){
			console.log(ex);
			alert('系统异常，请稍后重试');
		}
	})
}

// var reblogId = -1;
var inputedReblog = "";

$("#reblogModal").on('show.bs.modal', function(e){
	// var button = $(e.relatedTarget);
	// reblogId = button.data('bid');
	$("#modal_nickname").html($(".head_nickname_size").html());
	$("#modal_content").html($(".textarea_message").html());

	$("#reblog_textarea").val('');
	$("#reblog_textarea").focus();
})

$("#reblog_submit_btn").click(function(){
	if (inputedReblog.length == 0) {
		$("#reblog_textarea").focus();
		return;
	}
	if (blog_id == -1) {
		return;
	}

	reblogWeibo(inputedReblog, blog_id);

})
$("#reblog_textarea").bind('input propertychange', function(){
	// $("#submitBtn").removeAttr("disabled");

	// 计算个性签名字数
	var comment = $("#reblog_textarea").val();
	var wordCount = getBLen(comment);
	if (wordCount > 140) {
		$("#reblog_textarea").val(inputedReblog);
	}else{
		inputedReblog = comment;
	}
	$("#reblog_word_counter").text(getBLen($("#reblog_textarea").val()));
})
function reblogWeibo(content, blogId){
	$.post('postBlog.do', {
		content: content,
		reblog_id: blogId
	}, function(data){
		try{
			var jsonObj = JSON.parse(data);
			if (jsonObj.error == 0) {

				// reblogId = -1;
				$("#reblog_textarea").val('');
				inputedReblog = '';
				$("#reblogModal").modal('hide');

				// page = 0;
				// $("#weibo_area").html('');
				// loadBlog();

			}else if (jsonObj.error == 220) {
				window.location.href = "login.html";
			}else{
				alert('系统异常，请稍后重试');
			}
		}catch(ex){
			console.log(ex);
			alert('系统异常，请稍后重试');
		}
	})
}
$(".load_more_btn").click(function(){
	loadComment();
})
var selectedCommentId = null;
$("#deleteModal").on('show.bs.modal', function(e){
	var button = $(e.relatedTarget);
	selectedCommentId = button.data('cid');
})

$("#delete_comfirm_btn").click(function(){
	if (selectedCommentId == null) {
		return;
	}
	$.post('deleteComment.do', {
		comment_id: selectedCommentId
	}, function(data){
		try{
			var jsonObj = JSON.parse(data);
			if (jsonObj.error == 0) {
				$("#deleteModal").modal('hide');
				commentPage = 0;
				// 重新加载评论列表
				$("#reply_list").html('');
				loadComment();
			}else if (jsonObj.error == 220) {
				window.location.href = "login.html";
			}else{
				alert('系统异常，请稍后重试');
			}
		}catch(ex){
			console.log(ex)
		}
	})
})
</script>

	</body>
</html>
